<template>
    <div v-loading="loading">
        <el-form-item label="商品列表">
            <el-button type="success" @click.native="select2">选择商品</el-button>
            <el-dialog title="商品列表" :visible.sync="dialogTableVisible2">
                <div>
                <el-input v-model="categorParams.goodsName" style="width:50%"></el-input>
                <el-button @click="select2">搜索</el-button>
                </div>
                <el-table @selection-change="handleSelectionChange2" tooltip-effect="dark" ref="multipleTable" :data="girdData2" width="1000" height="300">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="goodsName" label="名称" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="year" label="年份">
					</el-table-column>
					<el-table-column prop="country" label="国家">
					</el-table-column>
					<el-table-column prop="vipPrice" label="会员价(分)">
					</el-table-column>
					<el-table-column prop="winePrice" label="酒家价格(分)">
					</el-table-column>
					<el-table-column prop="price" label="销售价(分)">
					</el-table-column>
					<el-table-column prop="stockNum" label="库存" >
					</el-table-column>
                </el-table>
                <div class="page_size">
                    <el-pagination background layout="total,prev, pager, next,jumper" :page-size="page_size2" @current-change="handleCurrentChange2" :total="page2">
                    </el-pagination>
                    <el-button class="select-submit-btn" @click="submitSelect2" type="success">确认</el-button>
                </div>
            </el-dialog>
        </el-form-item>
        <el-form-item label="商品列表">
            <el-table v-if="!status" :data="hasCityData2" border style="width: 100%;">
                <!-- 添加时 -->
                <!-- <el-table-column prop="id" label="ID" width="50"></el-table-column> -->
                <el-table-column show-overflow-tooltip prop="goodsName" label="商品名称" width="100">
                </el-table-column>
				<el-table-column label="数量" >
					<template slot-scope="scope">
						<el-input v-model="scope.row.qty" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column label="单位" >
					<template slot-scope="scope">
						<el-input v-model="scope.row.unit" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column width="140px" label="单价(分)" >
					<template slot-scope="scope">
						<el-input v-model="scope.row.price" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column label="税率%" >
					<template slot-scope="scope">
						<el-input v-model="scope.row.tax" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column label="总额(分)" >
					<template slot-scope="scope">
						<span>{{scope.row|amount}}</span>
					</template>
				</el-table-column>
                <el-table-column prop="stockNum" label="库存" >
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="deleteItem2(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-table v-else :data="updateSub" border style="width: 90%;">
                <!-- <el-table-column prop="id" label="ID" width="50"></el-table-column> -->
                <el-table-column show-overflow-tooltip prop="goodsName" label="商品名称" width="100">
                </el-table-column>
				<el-table-column label="数量" >
					<template slot-scope="scope">
						<el-input v-model="scope.row.qty" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column label="单位" >
					<template slot-scope="scope">
						<el-input v-model="scope.row.unit" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column width="140px" label="单价" >
					<template slot-scope="scope">
						<el-input v-model="scope.row.price" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column label="税率%" >
					<template slot-scope="scope">
						<el-input v-model="scope.row.tax" clearable>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column label="总额(分)" >
					<template slot-scope="scope">
						<span>{{scope.row|amount}}</span>
					</template>
				</el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="deleteItem2subUp(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
    </div>
</template>
<script>
import qs from 'qs';
export default {
    data() {
        return {
            loading:false,
            dialogTableVisible: false,
            girdData: [],
            hasCityData: [], //已经存在于服务器的地区数据
            multipleSelection: [],
            hasCityId: null, //已存在/选中的数据，只有ID
            status: 0, //0代表是新增，1代表是修改
            id: 0,
            updateSub: [],
            page_size2: 10, //每页显示几个
            page2: 1, //总页数
            currentPage2: 1, //当前页
            girdData2: '',
            hasCityData2: [], //已经存在于服务器的地区数据
            multipleSelection2: [],
            hasCityId2: [], //商品IDs
            dialogTableVisible2: false,
			categorParams: {
				"numPerPage": 10,
				"order": "asc",
				"pageNum": 1,
                "supplierStateEnum": "OPEN",
                goodsName:''
			}
        }
    },
    props: {
        sendStatus: '',
        sendUpdateData: ''
    },
    watch: {
        sendStatus() {
            this.status = this.sendStatus;
        },
        sendUpdateData() {
            this.updateSub = this.sendUpdateData;
            console.log(this.updateSub)
        }
    },
    mounted() {
        this.status = this.sendStatus;
    },
    methods: {
        // 发送数据给父组件
        sendData() {
            console.log(this.hasCityData2);
            this.$emit('sendSomeGoodsData', this.hasCityData2);
        },
        /*页面跳转*/
        handleCurrentChange2: function (currentPage2) {
            this.currentPage2 = currentPage2;
            this.categorParams.pageNum = this.currentPage2;
            this.select2();
        },
        handleSelectionChange2(val) {
            this.multipleSelection2 = val;
        },
        submitSelect2() {
            let groupId = [];
            console.log(this)
            for (var i in this.multipleSelection2) {
                groupId.push(this.multipleSelection2[i].id);
            }
            if (this.status) {
                for (var goods of this.multipleSelection2) {
                    console.log(goods)
                    var item = {
                        id:goods.id,
                        goodsName:goods.goodsName,
                        goodsId:goods.id,
                        qty : goods.stockNum,
                        unit : '瓶',
                        price : goods.investorPrice,
                        tax : 10,
                        stockNum:goods.stockNum
                    }
                    this.updateSub.push(item);
                }
                for (var i in this.updateSub) {
                    this.hasCityId2.push(this.updateSub[i].id);
                }
            } else {
                for (var goods of this.multipleSelection2) {
                    console.log(goods)
                    var item = {
                        id:goods.id,
                        goodsName:goods.goodsName,
                        goodsId:goods.id,
                        qty : goods.stockNum,
                        unit : '瓶',
                        price : goods.investorPrice,
                        tax : 10,
                        stockNum:goods.stockNum
                    }
                    this.hasCityData2.push(item);
                }
                for (var i in groupId) {
                    this.hasCityId2.push(groupId[i]);
                }
            }
            this.dialogTableVisible2 = false;
        },
        deleteItem2up(id) {
            /*编辑时的删除*/
            for (var i in this.updateGoods) {
                if (this.updateGoods[i].id == id) {
                    this.updateGoods.splice(i, 1);
                    delete this.hasCityId;
                }
            }
        },
        deleteItem2(id) {
            // 添加时删除
            console.log(id, this.multipleSelection2)
            for (var i in this.multipleSelection2) {
                if (this.multipleSelection2[i].id == id) {
                    this.hasCityData2.splice(i, 1);
                    this.multipleSelection2.splice(i, 1);
                    this.hasCityId2.splice(i, 1);
                }
            }
            this.$forceUpdate();
            
        },
        deleteItem2subUp(id) {
            /*编辑时的删除子列表*/
            for (var i in this.updateSub) {
                if (this.updateSub[i].id == id) {
                    this.updateSub.splice(i, 1);
                    this.hasCityId2.splice(i, 1);
                }
            }
        },
        select2() {
            this.loading = true;
			this.$post('productList', this.categorParams).then((res) => {
                let list = res.data.rows;
                this.hasCityId2 = [];
                this.girdData2 = list;
                this.page2 = res.data.total;
                this.dialogTableVisible2 = true;
            })
            this.loading = false;
        }
    },
    filters:{
        amount(item){
            if(typeof item == 'object'){
                if(item.qty && item.price && item.tax){
                    return item.qty * item.price * (Number(item.tax) + 100) / 100
                }else{
                    return 0;
                }
            }
            return 0;
        }
    }
}
</script>
<style lang="less" scoped>
.page_size{
    padding: 10px 0 0 0;
    text-align: center;
}
</style>
